<!--<template>-->
<!--  <div class="app-container">-->
<!--    &lt;!&ndash; 当前 IP 信息展示 &ndash;&gt;-->
<!--    <el-card class="box-card" v-if="ipInfo">-->
<!--      <template #header>-->
<!--        <span>当前登录 IP 信息</span>-->
<!--      </template>-->
<!--      <el-descriptions column="2" border>-->
<!--        <el-descriptions-item label="IP">{{ ipInfo.query }}</el-descriptions-item>-->
<!--        <el-descriptions-item label="国家">{{ ipInfo.country }}</el-descriptions-item>-->
<!--        <el-descriptions-item label="省份">{{ ipInfo.regionName }}</el-descriptions-item>-->
<!--        <el-descriptions-item label="城市">{{ ipInfo.city }}</el-descriptions-item>-->
<!--        <el-descriptions-item label="运营商">{{ ipInfo.isp }}</el-descriptions-item>-->
<!--      </el-descriptions>-->
<!--    </el-card>-->

<!--    <el-divider />-->

<!--    &lt;!&ndash; 手动输入查询 IP &ndash;&gt;-->
<!--    <el-card class="box-card">-->
<!--      <template #header>-->
<!--        <span>查询指定 IP 信息</span>-->
<!--      </template>-->
<!--      <el-form :inline="true" @submit.prevent>-->
<!--        <el-form-item label="IP 地址">-->
<!--          <el-input v-model="manualIp" placeholder="请输入 IP 地址" style="width: 250px;" />-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="queryManualIp">查询</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->

<!--      <div v-if="manualIpInfo" style="margin-top: 20px;">-->
<!--        <el-descriptions column="2" border>-->
<!--          <el-descriptions-item label="IP">{{ manualIpInfo.query }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="国家">{{ manualIpInfo.country }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="省份">{{ manualIpInfo.regionName }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="城市">{{ manualIpInfo.city }}</el-descriptions-item>-->
<!--          <el-descriptions-item label="运营商">{{ manualIpInfo.isp }}</el-descriptions-item>-->
<!--        </el-descriptions>-->
<!--      </div>-->
<!--    </el-card>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup lang="ts">-->
<!--import { ref, onMounted } from 'vue'-->
<!--import axios from 'axios'-->
<!--import { ElMessage } from 'element-plus'-->

<!--const ipInfo = ref<any>(null)-->
<!--const manualIpInfo = ref<any>(null)-->
<!--const manualIp = ref('')-->

<!--/** 查询当前 IP */-->
<!--const getCurrentIpInfo = async () => {-->
<!--  try {-->
<!--    const res = await axios.get('http://ip-api.com/json')-->
<!--    if (res.data.status === 'success') {-->
<!--      ipInfo.value = res.data-->
<!--    } else {-->
<!--      ElMessage.error('获取当前 IP 信息失败')-->
<!--    }-->
<!--  } catch (e) {-->
<!--    ElMessage.error('请求出错: ' + (e as Error).message)-->
<!--  }-->
<!--}-->

<!--/** 查询手动输入的 IP */-->
<!--const queryManualIp = async () => {-->
<!--  if (!manualIp.value) {-->
<!--    ElMessage.warning('请输入 IP 地址')-->
<!--    return-->
<!--  }-->
<!--  try {-->
<!--    const res = await axios.get(`http://ip-api.com/json/${manualIp.value}`)-->
<!--    if (res.data.status === 'success') {-->
<!--      manualIpInfo.value = res.data-->
<!--    } else {-->
<!--      ElMessage.error('查询失败，可能是无效 IP')-->
<!--    }-->
<!--  } catch (e) {-->
<!--    ElMessage.error('请求出错: ' + (e as Error).message)-->
<!--  }-->
<!--}-->

<!--onMounted(() => {-->
<!--  getCurrentIpInfo()-->
<!--})-->
<!--</script>-->

<!--<style scoped lang="scss">-->
<!--.app-container {-->
<!--  padding: 20px;-->
<!--}-->
<!--.box-card {-->
<!--  margin-bottom: 30px;-->
<!--}-->
<!--</style>-->












<template>
  <div class="app-container">
    <el-card class="mb-4" header="当前 IP 信息">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="IP">{{ currentIpInfo.ip }}</el-descriptions-item>
        <el-descriptions-item label="国家">{{ currentIpInfo.country_name }}</el-descriptions-item>
        <el-descriptions-item label="地区">{{ currentIpInfo.region }}</el-descriptions-item>
        <el-descriptions-item label="城市">{{ currentIpInfo.city }}</el-descriptions-item>
        <el-descriptions-item label="运营商">{{ currentIpInfo.org }}</el-descriptions-item>
        <el-descriptions-item label="是否代理">{{ currentIpInfo.proxy ? "是" : "否" }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card header="查询其他 IP">
      <el-form :inline="true" @submit.prevent>
        <el-form-item label="输入 IP">
          <el-input v-model="searchIp" placeholder="例如 8.8.8.8" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryIpInfo">查询</el-button>
        </el-form-item>
      </el-form>

      <div v-if="searchedIpInfo.ip" class="mt-4">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="IP">{{ searchedIpInfo.ip }}</el-descriptions-item>
          <el-descriptions-item label="国家">{{ searchedIpInfo.country_name }}</el-descriptions-item>
          <el-descriptions-item label="地区">{{ searchedIpInfo.region }}</el-descriptions-item>
          <el-descriptions-item label="城市">{{ searchedIpInfo.city }}</el-descriptions-item>
          <el-descriptions-item label="运营商">{{ searchedIpInfo.org }}</el-descriptions-item>
          <el-descriptions-item label="是否代理">{{ searchedIpInfo.proxy ? "是" : "否" }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";
import { message } from "@/utils/message";
import { router, remainingPaths } from "@/router";

const currentIpInfo = ref<any>({});
const searchIp = ref("");
const searchedIpInfo = ref<any>({});

const fetchCurrentIpInfo = async () => {
  const res = await axios.get("https://ipapi.co/json/");
  currentIpInfo.value = res.data;
  if(currentIpInfo.value?.country_name !== 'China' ){
    // ElMessage.error('当前 IP 不在中国，请切换到中国 IP 查看');
    message("当前 IP 不在中国，请关闭VPN", { type: "error" });
  }
};

const queryIpInfo = async () => {
  if (!searchIp.value) return;
  try {
    const res = await axios.get(`https://ipapi.co/${searchIp.value}/json/`);
    searchedIpInfo.value = res.data;
  } catch (err) {
    searchedIpInfo.value = {};
  }
};

onMounted(fetchCurrentIpInfo);
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.mb-4 {
  margin-bottom: 20px;
}
.mt-4 {
  margin-top: 20px;
}
</style>
